<template>
    <view class="orderManage">
        <uni-nav-bar fixed left-icon="left" @clickLeft="backHandle" title="订单记录" class="unibarS">
        </uni-nav-bar>
        <template v-if="list.length">
            <view class="list">
                <view class="item" v-for="(item, index) in list" :key="index">
                    <view class="item-top">
                        <view class="item-top-left">
                            <view class="name">{{ item.customerName }}</view>
                            <view class="rate">订单编号：{{ item.orderNumber }}</view>
                            <view class="time">创建时间：¥{{ item.createTime }}</view>
                        </view>
                        <view class="item-top-right">
                            <view class="state" :style="{ color: getColor(item.orderStatus) }">{{
                                bus_order_status[item.orderStatus] }}</view>
                            <view style="display: flex; flex-direction: column; align-items: center;">
                                <u-avatar :src="item.avatar"></u-avatar>
                                <view class="salesman">{{ item.businessManager }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </template>
        <template v-else>
            <empty-view />
        </template>
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    data() {
        return {
            params: {
                customerId: null,
                orderStatus: null,
                pageNum: 1,
                pageSize: 20
            },
            total: 0,
            status: 'loading',
            list: [],
            totalAmt: {
                orderTotalAmount: 0,
                realTotalAmount: 0,
                unRealTotalAmount: 0
            }
        }
    },
    onLoad(options) {
        this.bus_order_status = convertToDict(JSON.parse(uni.getStorageSync('bus_order_status')))
        if(options.customerId) {
            this.params.customerId = options.customerId
            this.getData()
        }
    },
    onReachBottom() {
        console.log('上拉加载onReachBottom')
        if (this.status == 'noMore' || this.status == 'loading') return
        this.params.pageNum = this.params.pageNum + 1
        this.status = 'loading'
        this.getData()
    },
    methods: {
        getData() {
            this.$http.get('/app/order/list', this.params).then(res => {
                if (res.code == 200) {
                    this.list = [...this.list, ...res.rows]
                    this.totalAmt.orderTotalAmount = res.orderTotalAmount
                    this.totalAmt.unRealTotalAmount = res.unRealTotalAmount
                    this.totalAmt.realTotalAmount = res.realTotalAmount
                    this.total = res.total
                    if (this.total > this.list.length) {
                        console.log('有更多数据')
                        this.status = 'more'
                    } else {
                        console.log('没更多数据')
                        this.status = 'noMore'
                    }
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },
        getColor(state) {
            let color;
            switch (state) {
                case '1001':
                    color = 'rgba(103, 117, 133, 1)';
                    break;
                case '1002':
                    color = 'rgba(0, 186, 173, 1)';
                    break;
                case '1003':
                    color = 'rgba(255, 141, 26, 1)';
                    break;
                case '1004':
                    color = 'rgba(255, 141, 26, 1)';
                    break;
                case '1005':
                    color = 'rgba(255, 141, 26, 1)';
                    break;
                case '1006':
                    color = 'rgba(255, 0, 28, 1)';
                    break;
                default:
                    color = 'rgba(103, 117, 133, 1)';
            }
            return color;
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.list {
    >view:last-child {
        margin-bottom: 0;
    }
}

.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-top: 20rpx;

    .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-top-left {
            flex: 1;
            margin-right: 20rpx;
            width: 0;

            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                margin-bottom: 32rpx;
                // 超出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rate,
            .time {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-bottom: 26rpx;
            }
        }

        .item-top-right {
            width: 130rpx;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            text-align: right;

            .state {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(0, 186, 173, 1);
                margin-bottom: 20rpx;
            }

            .salesman {
                margin-top: 8rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                width: 100%;
                // 超出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>